<template>
    <div id="ReservationList">
        <!--        <table id="table-4">
            <thead cellspacing="0" style="width:100%" class="table">
                <tr style="background: rgb(223, 216, 232)">
                    <th class="th">序号</th>
                    <th class="th">楼层</th>
                    <th class="th">教室</th>
                    <th class="th">座位号</th>
                    <th class="th">开始时间</th>
                    <th class="th">结束时间</th>
                    <th class="th">备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="e in reservationList" :key="e.id" class="list-tr">
                    <td>{{ e.id }}</td>
                    <td>{{ e.floorName }}</td>
                    <td>{{ e.classroomName }}</td>
                    <td>{{ e.seatAbbreviation }}</td>
                    <td>{{ e.startTime }}</td>
                    <td>{{ e.endTime }}</td>
                    <td>{{ getStateStr(e.reservationState) }}</td>
                </tr>
            </tbody>
        </table> -->

        <ve-table :columns="columns" :table-data="reservationList" row-hover-color="#eee" row-click-color="#edf7ff" />

    </div>
</template>

<script>
    export default {
        name: "ReservationList",
        components: {},
        data() {
            return {
                reservationList: [],
                columns: [
                    // { field: "id", key: "a", title: "序号", align: "center" },
                    {
                        field: "floorName",
                        key: "b",
                        title: "楼层",
                        align: "left"
                    },
                    {
                        field: "classroomName",
                        key: "c",
                        title: "教室",
                        align: "right"
                    },
                    {
                        field: "seatAbbreviation",
                        key: "d",
                        title: "座位号"
                    },
                    {
                        field: "startTime",
                        key: "e",
                        title: "开始时间"
                    },
                    {
                        field: "endTime",
                        key: "f",
                        title: "结束时间"
                    },
                    {
                        field: "reservationState",
                        key: "g",
                        title: "备注",
                        renderBodyCell: ({
                            row,
                            column,
                            rowIndex
                        }, h) => {
                            const code = Number(row[column.field]);
                            let taht = this;
                            if (code == 1) {
                                return (
                                    <a style="color:#1890ff;" on-click={() => taht.cancelReservation( row["id"] )}> <van-icon name="clear" /></a>
                                );
                            }
                            return ( 
                                <span class="text-bold">
                                {taht.getStateStr(code)} 
                                </span>
                            );
                        },
                    },
                ],

            };
        },
        methods: {
            cancelReservation(reId) {
                console.log(11 + ' ' + reId);
                this.$dialog.confirm({
                        title: '标题',
                        message: '确定要取消这个预约吗',
                    })
                    .then(() => {
                        // on confirm
                        this.$axios
                            .get("/api/seatreservation/reservation/cancelReserve/" + reId)
                            .then(response => {
                                console.log(response);
                                if (response.data.code == 200) {
                                    console.log('取消成功');
                                    this.$notify({ type: 'primary', message: '取消成功' });
                                    this.loadMyReservationList();
                                } else {
                                    this.$notify({ type: 'danger', message: '取消失败' });
                                }
                            })
                            .catch(error => {
                                this.$notify("网络异常");
                                console.log(error);
                            });
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            getStateStr(code) {
                let str = '';
                switch (code) {
                    case 1:
                        str = "已预约";
                        break;
                    case -1:
                        str = "已取消";
                        break;
                    case 10:
                        str = "已签到";
                        break;
                    case -10:
                        str = "违约";
                        break;
                    case 20:
                        str = "已完成";
                        break;
                }
                return str;
            },
            loadMyReservationList() {
                let that = this;
                this.$axios
                    .get("/api/seatreservation/reservation/myReservationList")
                    .then(response => {
                        console.log("Success", response);
                        // 解析数据
                        // console.log("log2", response.data.data);
                        that.reservationList = response.data.data;
                    })
                    .catch(error => {
                        that.$notify("网络异常");
                        console.log(error);
                    });
            },
        },
        created() {
            this.loadMyReservationList();
        },
    };
</script>

<style lang="css" scoped="scoped">

</style>
